 /*
 * @name: 首页模块自定义
 * @Author: along
 * @Date: 2019-07-13
 * @Last Modified by: along
 * @Last Modified time: 2020-07-13
 */
<template>
    <div class="container appModuleDefine">
        <!-- head -->
        <div class="appModuleDefine-title">
            商城首页自定义
        </div>
        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            class="tableData"
            border
            ref="dragTable"
            id="dragTable"
            @sort-change="handleSortChanged"
        >
            <el-table-column
                label="序号"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column
                prop="type"
                label="促销模块"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="left"
            >
                <template slot-scope="scope">
                    <p v-if="scope.row.type == 'shop_banner'">页面banner</p>
                    <p v-if="scope.row.type == 'lottery'">抽奖</p>
                    <p v-if="scope.row.type == 'free'">0元购</p>
                    <p v-if="scope.row.type == 'discount'">折扣专区</p>
                    <p v-if="scope.row.type == 'flash_sale'">秒杀</p>
                    <p v-if="scope.row.type == 'activity'">活动区</p>
                    <p v-if="scope.row.type == 'welfare'">新人专享</p>
                    <p v-if="scope.row.type == 'goods_activity_near_exp'">临期商品</p>
                </template>
            </el-table-column>
            <el-table-column
                prop="sort"
                label="排序"
                align="center"
            >
                <template slot-scope="scope">
                    <div class="sort-wrap">
                        <span class="el-text">
                            {{ scope.$index + 1 }}
                        </span>
                        <i class="iconfont el-icon-hand-tuozhuai1"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="status"
                label="显示状态"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                align="center"
            >
                <template slot-scope="scope">
                    <p
                        v-if="scope.row.status == 1"
                        class="zd-show"
                    >
                        已显示
                    </p>
                    <p
                        v-if="scope.row.status == 0"
                        class="zd-no"
                    >
                        已隐藏
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        v-if="scope.row.status == 1"
                        @click="fnSetModule(scope.$index)"
                    >
                        隐藏
                    </el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 0"
                        @click="fnSetModule(scope.$index)"
                    >
                        显示
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import Sortable from 'sortablejs';
export default {
    mixins: [back],
    components: {
    },
    data () {
        return {
            filterData: {
                sort_field: 'asc',
                sorttype: 'desc'
            },
            tableData: [],
            newList: [],
            authResult: {}
        };
    },
    filters: {},
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '商城'},{title: '首页模块自定义'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
        this.initDrag();
    },
    methods: {
        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/shop_home%5Cget_module_config', {
                sort_field: this.filterData.sort_field,
                sort_type: this.filterData.sort_type
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data;
                    this.newList = JSON.parse(JSON.stringify(resp.data));
                }
            });
        },

        /**
         * 拖拽
         */
        initDrag () {
            const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];

            this.sortable = Sortable.create(el, {
                ghostClass: 'sortable-ghost',
                setData: dataTransfer => {
                    dataTransfer.setData('Text', '');
                },
                onEnd: evt => {
                    const tempIndex = this.newList.splice(evt.oldIndex, 1)[0];

                    this.newList.splice(evt.newIndex, 0, tempIndex);
                    this.$post('/student/shop_home%5Cset_module_config',{
                        config: JSON.stringify(this.newList)
                    },resp=>{
                        if (resp.code == 1) {
                            this.$notify({
                                title: '提示',
                                message: '排序成功',
                                type: 'success'
                            });
                        } else if (resp.code == 0) {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });
                }
            });
        },


        /**
         * 显示模块/隐藏模块
         */
        fnSetModule (index) {
            if(this.tableData[index].status) {
                this.$confirm('该模块是否在首页入口隐藏?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData[index].status = this.tableData[index].status ? 0 : 1;
                    this.fnSetConfig(this.tableData);
                });
            } else {
                this.tableData[index].status = this.tableData[index].status ? 0 : 1;
                this.fnSetConfig(this.tableData);
            }
        },

        /**
         * 设置模块状态
         */
        fnSetConfig (list) {
            this.$post('/student/shop_home%5Cset_module_config',{
                config: JSON.stringify(list)
            },resp=>{
                if (resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '设置成功',
                        type: 'success'
                    });
                    this.getTableData();
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * 数据排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 'asc',
                descending: 'desc'
            };

            let sortFieldMap = {
                //TOD
            };

            if (data.order) {
                this.filterData.sort_field = sortFieldMap[data.prop];
                this.filterData.sort_type = sortTypeMap[data.order];
            } else {
                this.filterData.sort_field = '';
                this.filterData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 0px 0px 10px 0px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .appModuleDefine-title {
            width: 100%;
            height: 68px;
            line-height: 68px;
            color: #333333;
            font-size: 20px;
            font-weight: 500;
            position: relative;
            padding-left: 35px;
            box-shadow:0px -1px 0px 0px rgba(240,242,245,1);
            box-sizing: border-box;
            border-bottom: 1px #f4f4f4 solid;
            margin-bottom: 24px;
            &::before {
                content: '';
                position: absolute;
                width: 3px;
                height: 20px;
                background: #1890FF;
                top: 23px;
                margin-left: -8px;
            }
        }
        .tableData {
            width: calc(100% - 30px);
            margin: 0 15px 0 15px;
        }
        .sort-wrap {
            text-align: center;
            .el-text {
                position: relative;
                top: -1px;
                margin-left: 3px;
                &::after {
                    content: '';
                    position: absolute;
                    right: -4px;
                    top: 3px;
                    width:1px;
                    height:12px;
                    background:#EBEBEB;
                    font-weight: bold;
                }
            }
        }
        .zd-show, .zd-no {
            position: relative;
            padding-left: 16px;
        }
        .zd-show::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #52C41A;
            top: 8px;
            margin-left: -13px;
        }
        .zd-no::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #F53341;
            top: 8px;
            margin-left: -13px;
        }
        .el-icon-hand-tuozhuai1 {
            color: #409EFF;
            font-size: 14px;
            cursor: move;
            margin-left: 12px;
            position: relative;
            top: -1px;
        }
    }
</style>
<style lang="less">
    .appModuleDefine{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-table th.is-leaf {
            background: #f4f4f4 !important;
        }
        .sortable-ghost{
            opacity: .8;
            color: #fff!important;
            background: #f4f4f4!important;
        }
    }
</style>
